<template>
	<view class="uni-tab-bar">
		<scroll-view  scroll-x class="uni-swiper-tab" :scroll-left="navScrollLeft" :style="srcollStyle">
			<block v-for="(tab, index) in tabs" :key='tab.id'>
				<view class="swiper-tab-list" :class="{active: tabIndex == index}" @tap="handleTabItemClick(index)" :style="scrollItemStyle">
					{{ tab.name }} <template v-if="tab.num">{{ tab.num }}</template>
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"swiper-tab-head",
		props:{
			tabs: Array,
			tabIndex: Number,
			navScrollLeft: 0,
			scrollItemStyle: {
				type: String,
				default: ''
			},
			srcollStyle: {
				type: String,
				default: ''
			}
		},
		methods:{
			// 点击tab项(index下标)
			handleTabItemClick(index) {
				this.$emit('tab-click', index)
			}
		}
	}
</script>

<style scoped> 
.uni-swiper-tab {
	border-bottom: 1upx solid #EEEEEE;
}
.swiper-tab-list {
	color: #969696;
	font-weight: 700;
}

.uni-tab-bar .active {
	color: #343434;
	
}

.uni-tab-bar .active .swiper-tab-line {
	border-bottom: 6upx solid #FEDE33;
	border-top: 6upx solid #FEDE33;
	border-radius: 20upx;
	width: 90upx;
	margin: -10upx auto 0;
	
	
}
</style>
